<template>
    <div id="CollectionSituation3"></div>
  </template>
  <script setup>
  import * as echarts from 'echarts'
  const props = defineProps({
    listData:{
      type: Array,
    }
  })
  const { listData } = toRefs(props)
  
  onMounted(() => { // 需要获取到element,所以是onMounted的Hook
    watch(()=>props.listData,()=>{
      const xAxisArr = ref([])
      const seriesArr = ref([])
      xAxisArr.value = listData.value.map(item=>{return item.years})
      seriesArr.value = listData.value.map(item=>{return item.surveyPointNum||item.buildMonomerNum||item.damagePointNum})
      echarts.init(document.getElementById('CollectionSituation3')).dispose() ;
      let myChart = echarts.init(document.getElementById("CollectionSituation3"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          show: false
        },
        grid: {
          top: '8%',
          left: 0,
          right: 0,
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: 'category',
          data: xAxisArr.value,
          // x轴样式
          axisLine: {
            lineStyle: {
              color: '#30374A',
              show: false,
            }
          },
          //x轴文字的配置
          axisLabel: {
            textStyle: {
              color:'rgba(255, 255, 255, 0.5)',
            },
          },
        },
        // y轴
        yAxis:{
          type:'value',
          min: 0,
          // max: 100,
          // y轴样式
          axisLine: {
            show: false,
            lineStyle: {
              color: 'transparent'
            }
          },
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color:'rgba(255,255,255,0.5)',
            },
          },
          // 背景线条
          splitLine: {
            lineStyle: {
              color: 'rgba(71,90,219,0.5)',type: 'dashed'
            }
          }
        },
        series: [
          {
            type: "bar",
            data: seriesArr.value,
            barWidth: 20,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#46FFFF' },
                { offset: 1, color: '#0775FE' }
              ]),
            },
            showBackground:true,
            backgroundStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(71, 90, 219, 0.2)' },
                { offset: 1, color: 'rgba(71, 90, 219, 0)' }
              ]),
            },
            label: {
              show: true,
              color: '#46FFFF',
              position: 'top',
            },
          },
          {
            type: "line",
            data: seriesArr.value,
            symbol: 'circle', //折线点设置为实心点
            symbolSize: 12, //折线点的大小
            itemStyle : { 
              color:'#46FFFF',
              borderColor:'#0775FE',
              borderWidth: 3,
              boxShadow: '0px 0px 6px 1px rgba(70,255,255,0.8)',
            },
            lineStyle:{ 
              color:'#0775FE', //改变折线颜色
              width:2,//改变粗细  
            }
          },
        ],
        // 刻度线
        axisTick: {
            show: false,
            length: 0,
            lineStyle: {
                color:'transparent',
                type: 'solid',
                width: 1
            },
            alignWithLabel: false 
        },
      });
      window.onresize = function () { // 自适应大小
        myChart.resize();
      };
    })
  })
  </script>
  <style lang='scss' scoped>
  #CollectionSituation3{
    margin: auto;
    height: 400px;
    width: 400px;
  }
  </style>